<template>
  <!-- <el-icon><location /></el-icon> -->
  <div class="common-layout" style="height: 100%">
    <el-container style="height: 100%">
      <el-header style="background-color: rgb(115.2, 117.6, 122.4)">
        <h2 style="color: white; margin-top: 11px; float: left">智慧农业-智慧畜牧育种管理平台</h2>
        <img :src='Images' style="width: 60px; margin-top: 1.5px; float: right"/>
        <el-button type="danger" plain style="margin-top: 11px; float: right" @click="router.push('/')" >退出登录</el-button>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color=" #F2F6FC" class="el-menu-vertical-demo" text-color="#000" default-active="2" :collapse="isCollapse">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
              <el-radio-button :value="false" v-if="isCollapse"><el-icon><Expand /></el-icon></el-radio-button>
              <el-radio-button :value="true" v-else><el-icon><Fold /></el-icon></el-radio-button>
            </el-radio-group>
            <el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>常用菜单</span></template></el-sub-menu>
            <!--一级-->
            <el-sub-menu v-for="(item,index) in MenuItem.filter((x:any)=>x.parentLevelId==0)" :key="item.permissionsFunction" :index="index + 1">
              <template #title>
                <span @click="clickRouter(item.url)">{{ item.permissionsFunction }}</span>
              </template>
              <!--二级-->
              <template v-for="(itemTwo,indexTwo) in MenuItem.filter((x:any)=>x.parentLevelId==item.permissionsId)" :key="itemTwo.permissionsId">
                <div v-if="MenuItem.filter((x:any)=>x.parentLevelId==itemTwo.permissionsId).length >= 1">
                  <el-sub-menu :index="index + 1 + '-' + indexTwo + 1" >
                    <template #title><span @click="clickRouter(itemTwo.url)">{{ itemTwo.permissionsFunction }}</span></template>
                    <!--三级-->
                    <el-menu-item v-for="(itemThree,indexThree) in MenuItem.filter((x:any)=>x.parentLevelId==itemTwo.permissionsId)" :key="itemThree.permissionsId" :index=" index + 1 + '-' + indexTwo + 1 + '-' + indexThree + 1" @click="clickRouter(itemThree.url)">{{ itemThree.permissionsFunction}}</el-menu-item>
                  </el-sub-menu>
                </div>
                <div v-else>
                  <el-menu-item :index="index+1 + '-' + indexTwo+1" @click="clickRouter(itemTwo.url)">{{ itemTwo.permissionsFunction }}</el-menu-item>
                </div>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main style="background-color: #fff">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;


const Images=apiUrl +'/Images/QQ%E5%9B%BE%E7%89%8720240305161730.jpg'

const router = useRouter();

//菜单数据
const MenuItem: any = ref([]);
const handleMenu = () => {
  axios
    .post(apiUrl+"/api/Menus/GetMenus", {
      userId: localStorage.getItem("userId"),
    })
    .then((res) => {
      console.log(res.data);
      MenuItem.value = res.data.data;
    });
};

//跳转页面
const clickRouter = (url: any) => {
  router.push(url);
};

//展开 收缩
const isCollapse = ref(false);

//创建生命周期函数钩子
onMounted(() => {
  handleMenu();
});
</script>


<!-- <el-menu-item v-for="(itemTwo,indexTwo) in MenuItem.filter((x:any)=>x.parentLevelId==item.permissionsId)" :key="itemTwo.permissionsId" :index="index+'-'+indexTwo" >{{ itemTwo.permissionsFunction }}</el-menu-item>
  <el-sub-menu v-for="(itemThree,indexThree) in MenuItem.filter((x:any)=>x.parentLevelId==item.permissionsId)" :key="itemThree.permissionsId" :index="index+'-'+indexThree">
  <template #title>人员管理</template>
  <el-menu-item index="3-3-1" @click="router.push('/AddUser')">增加人员</el-menu-item>
</el-sub-menu> -->
